<template>
	<view class="pageBg">
		<Skeleton v-if="skeletonLoading" type="newsList"></Skeleton>
		<view class="inv-top-menu-bar">
			<view class="top-menu" ref="manageNav">
				<view class="top-menu-list">
					<view v-for="(item, index) in categorylist" :key="index"
						:class="item.id == cid ? 't-btn active' : 't-btn'" @click="changeCategory(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<u-empty image="search" description="没有找到对应的数据" style="background-color:#fff" v-if="show_empty === true" />
		<view>
			<view class="list_wrapper">
				<view @click="jumpTo(item)" class="list_block" v-for="(item, index) in dataset" :key="index">
					<image :src="item.thumb" :alt="item.title" class="cover"></image>
					<view class="title">
						{{ item.title }}
					</view>
					<view class="some">
						<view class="form" :class="item.source == 1 ? 'rep' : ''">
							{{ item.source_text }}
						</view>
						<view class="time">{{ item.addtime | timeFilter }}</view>
						<view class="num">{{ item.click }}</view>
						<view class="clear"></view>
					</view>
				</view>
			</view>
			<u-loadmore class="u-loadmore" v-if="dataset.length >= pagesize" :status="finished_status" />
		</view>
		<web-view v-if="url!=''" :src="url"></web-view>
	</view>
</template>

<script>
	import wxshare from '@/static/js/share.js'
	import {
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import Skeleton from '@/components/Skeleton.vue'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	export default {
		name: 'News',
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		data() {
			return {
				skeletonLoading: true,
				categorylist: [],
				dataset: [],
				finished_status: 'loadmore',
				show_empty: false,
				cid: 0,
				page: 1,
				pagesize: 15,
				url: '',
				params: {}
			}
		},
		onShareAppMessage() {
			return onShareAppMessage({
				url: '/views/News',
				alias: "newslist",
				info: {}
			})
		},
		onShareTimeline() {
			return onShareTimeline({
				url: '/views/News',
				alias: "newslist",
				info: {}
			})
		},
		components: {
			Skeleton
		},
		watch: {
			cid(value) {
				this.initQuery({
					cid: value
				})
				this.fetchData(true)
			}
		},
		onLoad(e) {
			this.params = e
		},
		mounted() {
			// 请求列表数据
			this.fetchCategoryData()
			// wxshare({}, 'newslist', location.href)
		},
		onReachBottom() {
			this.page++
			this.fetchData(false)
		},
		methods: {
			initQuery(query) {
				this.cid = query.cid !== undefined ? query.cid : 0
				if (this.cid == 0) {
					this.cid = this.categorylist[0].id
				}
			},
			fetchCategoryData() {
				http
					.get(api.news_categorylist, {})
					.then(res => {
						this.categorylist = [...res.data.data.items]
						this.initQuery(this.params)
						this.fetchData(true)
					})
					.catch(() => {})
			},
			fetchData(init) {
				this.show_empty = false

				let conditions = {
					cid: this.cid
				}
				if (init === true) {
					this.page = 1
				} else {
					this.finished_status = 'loading'
				}
				conditions.page = this.page
				conditions.pagesize = this.pagesize

				http
					.get(api.news_list, conditions)
					.then(res => {
						if (init === true) {
							this.dataset = [...res.data.data.items]
						} else {
							this.dataset = this.dataset.concat(res.data.data.items)
						}
						this.skeletonLoading = false
						// 数据全部加载完成
						if (res.data.data.items.length < this.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length == 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			changeCategory(cid) {
				this.page = 1
				this.cid = cid
			},
			jumpTo(item) {
				if (item.link_url == '') {
					uni.navigateTo({
						url: '/commonViews/NewShow?id=' + item.id
					})
					this.url = ''
				} else {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					setTimeout(() => {
						this.url = item.link_url
					}, 400)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list_wrapper {
		.list_block {
			.cover {
				position: absolute;
				left: 0;
				top: 26rpx;
				width: 176rpx;
				height: 132rpx;
				border: 0;
				font-size: 20rpx;
			}

			.some {
				.form {
					&.rep {
						color: #ff6600;
						background-color: #fff5e8;
					}

					float: left;
					line-height: 32rpx;
					padding: 0 12rpx;
					font-size: 22rpx;
					color: #1787fb;
					border-radius: 6rpx;
					background-color: #e7f3ff;
					margin-right: 20rpx;
				}

				.time {
					float: left;
					padding-left: 34rpx;
					font-size: 24rpx;
					color: #999999;
					height: 32rpx;
					background-image: url($ImgUrl + "com_man_i3.png");
					background-repeat: no-repeat;
					background-position: 0 4rpx;
					background-size: 24rpx;
				}

				.num {
					float: left;
					font-size: 24rpx;
					color: #999999;
					height: 32rpx;
					margin-left: 20rpx;
					background-image: url($ImgUrl + "com_man_ic2.png");
					background-repeat: no-repeat;
					background-position: 0 6rpx;
					background-size: 26rpx 20rpx;
					padding-left: 34rpx;
				}
			}

			.title {
				line-height: 1.6;
				word-break: break-all;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 12rpx;
				height: 96rpx;
				overflow: hidden;
			}

			width: 100%;
			position: relative;
			padding: 20rpx 0 20rpx 212rpx;
			display: block;
			height: 188rpx;

			&:not(:last-child) {
				border-bottom: 2rpx solid #f3f3f3;
			}
		}

		background-color: #ffffff;
		padding: 0 34rpx;
	}

	.inv-top-menu-bar {
		background: #ffffff;
		border-bottom: 2rpx solid #f3f3f3;

		.top-menu {
			overflow: hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.top-menu-list {
			white-space: nowrap;

			.t-btn {
				position: relative;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				text-decoration: none;
				padding: 24rpx 26rpx;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

				&::after {
					position: absolute;
					left: 50%;
					bottom: 6rpx;
					width: 32rpx;
					height: 6rpx;
					background-color: #1787fb;
					border-radius: 100%;
					transform: translate(-50%, 0);
				}

				&.active {
					color: #1787fb;

					&::after {
						content: " ";
					}
				}
			}
		}
	}
</style>
